<template>
  <a-card :bordered="false">
    <div>
      <a-tabs :defaultActiveKey="tabKey" @change="callback">
        <a-tab-pane tab="全部消息" key="2"></a-tab-pane>
        <a-tab-pane tab="标记消息" key="1"></a-tab-pane>
      </a-tabs>
    </div>

    <div class="table-page-search-wrapper">
      <div class="header_right">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button
            @click="batchDel"
            v-if="selectedRowKeys.length > 0"
            ghost
            type="primary"
            icon="delete"
            >批量删除
          </a-button>
          <!--  -->
        </div>
      </div>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a
          style="font-weight: 600"
          >{{ selectedRowKeys.length }}</a
        >项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        :columns="columns"
        size="middle"
        rowKey="id"
        :pagination="ipagination"
        :dataSource="dataSource"
        :loading="loading"
        :expandedRowKeys="expandedRowKeys"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        @expandedRowsChange="handleExpandedRowsChange"
        @change="handleTableChange"
      >
        <span slot="status" slot-scope="text, record">
          <i
            v-if="record.status == 1"
            class="iconfont icon-yiduxinxi"
            style="font-weight: 600; color: #999"
          ></i>
          <i
            v-else
            class="iconfont icon-weidu2x"
            style="font-weight: 600; color: #f2cb51"
          ></i>
        </span>
        <span slot="messageType" slot-scope="text, record">
          <span v-if="record.messageType == 'system'">系统消息</span>
          <span v-else>其他消息</span>
        </span>
        <span slot="action" slot-scope="text, record">
          <a href="javascript:;" @click="Favorite(record)">
            <i
              class="iconfont icon-xingxing1"
              :class="[record.star == 1 ? 'yellow' : 'black']"
            ></i>
            <!-- {{  record.star ==1?'取消标记':'标记'}} -->
          </a>
          <a-divider type="vertical" />
          <a href="javascript:;" @click="handleMessage(record)">
            <i class="iconfont icon-xiaoxi3"></i>
          </a>
       
        </span>

        <!-- 字符串超长截取省略号显示 -->
        <span slot="url" slot-scope="text">
          <j-ellipsis :value="text" :length="25" />
        </span>
        <!-- 字符串超长截取省略号显示-->
        <span slot="component" slot-scope="text">
          <j-ellipsis :value="text" />
        </span>
      </a-table>
    </div>
  </a-card>
</template>

<script>
import { ListMixin } from "@/mixins/ListMixin";
import JEllipsis from "@/components/Control/JEllipsis";
import { getAction } from "@/api/manage";
import {
  doReleaseMessage,
  MessageFavorite,
  MessageReadStatus,
} from "@/api/api";
const columns = [
  {
    title: "消息类型",
    dataIndex: "messageType",
    key: "messageType",
    scopedSlots: { customRender: "messageType" },
  },
  {
    title: "消息内容",
    dataIndex: "taskName",
    key: "taskName",
  },
  {
    title: "阅读状态",
    dataIndex: "status",
    key: "status",
    scopedSlots: { customRender: "status" },
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
  },
  {
    title: "发件人",
    dataIndex: "account",
    key: "account",
  },

  {
    title: "操作",
    dataIndex: "action",
    fixed: "right",
    scopedSlots: { customRender: "action" },
    align: "center",
  },
];

export default {
  name: "PermissionList",
  mixins: [ListMixin],
  components: {
    JEllipsis,
  },
  data() {
    return {
      description: "这是菜单管理页面",
      // 表头
      queryParam: {},
      columns: columns,
      loading: false,
      // 展开的行，受控属性
      expandedRowKeys: [],
      tabKey: 2,
      url: {
        list: "/accounting/task/attention/list",
        deleteBatch: "/accounting/task/attention/delete",
      },
    };
  },

  mounted() {
    this.loadData();
  },
  methods: {
    onSelectChange(selectedRowKeys, selectionRows) {
      //   console.log(selectedRowKeys, selectionRows);
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
    },
    callback(key) {
      // 动态添加操作类型列
      if (key == 2) {
        this.tabKey = "2";
      } else if (key == 1) {
        this.tabKey = "1";
      }
      this.queryParam.favorite = key;
      this.loadData();
    },
    handleMessage(messageObj) {
      let param = {
        id: messageObj.id,
      };
      MessageReadStatus(param).then((res) => {
        this.loadData();
      });
      this.$router.push(`/accounting/filltask?taskId=${messageObj.taskId}`);
    },
    Favorite(messageObj) {
      let param = {
        id: messageObj.id,
        star: messageObj.star == 0 ? 1 : 0,
      };
      MessageFavorite(param).then((res) => {
        this.loadData();
      });
    },
    loadData(arg) {
      {
        //   console.log(this.url.list);
        if (!this.url.list) {
          alert("请设置url.list 属性");
          return;
        }
        //加载数据 若传入参数为1 则加载第一页数据
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();
        // 开启loading
        this.loading = true;
        getAction(this.url.list, params)
          .then((res) => {
            if (res.success) {
              this.dataSource = res.result.data.records || res.result;
              //   console.log(this.dataSource, res.result.data.total);
              if (res.result.data.total) {
                this.ipagination.total = res.result.data.total;
              } else {
                this.ipagination.total = 0;
              }
            } else {
              this.$message.warning(res.message);
            }
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    // 绑定边界
    handleBoundary(facilities) {
      this.$refs.modalboundary.show(facilities);
    },
    // 打开数据规则编辑
    handleDataRule(record) {
      this.$refs.PermissionDataRuleList.edit(record);
    },
    handleAddSub(record) {
      this.$refs.modalForm.title = "添加子菜单";
      this.$refs.modalForm.disableSubmit = false;
      this.$refs.modalForm.edit({
        status: "1",
        permsType: "1",
        route: true,
        parentId: record.id,
        menuType: 1,
      });
    },
    handleExpandedRowsChange(expandedRows) {
      this.expandedRowKeys = expandedRows;
    },
  },
};
</script>
<style scoped>
/* @import '~@assets/less/common.less'; */
.yellow {
  color: #f2cb51;
}
.black {
  color: #999 !important;
}
</style>